<template>
    <div class="session">
        <div class="s-tp">
            <div class="s-box">
                <div class="img-box">
                    图标
                </div>
                <div class="contents">
                    <span>Whatsapp</span>
                    <span>_</span>
                </div>
            </div>
            <div class="delete">
                X
            </div>
        </div>
        <div class="s-ct">
            <span class="c-icon"><el-icon><Edit /></el-icon></span>
            <span>备注</span>
        </div>
        <div class="s-bt">
            <span class="c-icon"><el-icon><SemiSelect /></el-icon></span>
            <span>-</span>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ElIcon } from 'element-plus';
</script>

<style scoped lang="scss">
.session {
    border: 1px solid #f1f1f1;
    border-radius: 4px;

    .s-tp {
        display: flex;
        justify-content: space-between;
        padding: 10px;

        .s-box {
            display: flex;

            .img-box {
                width: 40px;
                height: 40px;
                border-radius: 50%;
                background: #ddd;
                line-height: 40px;
                text-align: center;
                margin-right: 10px;
            }

            .contents {
                display: flex;
                flex-direction: column;
                text-align: left;
            }
        }

    }

    .s-bt ,.s-ct{
        text-align: left;
       .c-icon{
         margin:0 5px;
         width: 20px;
         height: 20px;
         display: inline-block;
         background: #ddd;
         margin-bottom: 5px;
       }
    }
}</style>